<!--
 * @Author: lzeng
 * @Date: 2020-05-20 09:18:10
 * @description: 我的好友进度条
-->
<template>
	<view class="main">
    <view class="cwgProgress" >
    	<view :style="{ background: bottomBackground, height: progressHeight + 'px', borderRadius: (borderRadius==-1? progressHeight/2 :borderRadius) + 'px' }"></view>
    	<view ref="schedule" :style="{ background: firstBackground, height: progressHeight + 'px', marginTop: -progressHeight + 'px', borderRadius: (borderRadius==-1? progressHeight/2 :borderRadius) + 'px',width: progress/100 * 100+'%'}"></view>
      <view class="money" :class="[progress<=0?'money_start':progress>=100?'money_end':'money_center']">
        <view class="icon">￥</view>
        已到账{{money}}元
      </view>
    </view>
    <view class="total">{{total}}</view>
  </view>
</template>

<script>
var _self;
export default {
	name: 'cwgProgress',
	// 属性
	props: {
    total: {
      type: String,
      default: '0.00'
    },
    money: {
      type: String,
      default: '0.00'
    },
		progressHeight: {
			type: Number,
			default: 20
		},
		bottomBackground: {
			type: String,
			default: '#c0c0c0'
		},
		firstBackground: {
			type: String,
			default: '#ffaa00'
		},
		progress:{
			type: Number,
			default: 0
		},
		progressWidth:{
			type: Number,
			default: 375
		},
		borderRadius:{
			type:Number,
			default:-1
		}
	},
	onLoad: () => {
		_self = this;
	},
};
</script>

<style lang="scss" scoped>
  .total {
    color: #E21536;
    font-size: 28rpx;
    padding: 0 20rpx;
  }
  .main {
    display: flex;
  }
  .money_start {
    top: calc(-55rpx/2 + 100%/2);
    left: 0;
  }
  .money_center {
    top: calc(-55rpx/2 + 100%/2);
    left: calc(100%/2 - 221rpx/2);
  }
  .money_end {
    top: calc(-55rpx/2 + 100%/2);
    right: 0;
  }
  .money {
    position: absolute;
    width: 221rpx;
    height: 55rpx;
    background-color: #fff;
    color: #F38192;
    box-shadow: 1rpx 0rpx 5rpx 1rpx #F38192;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    .icon {
      width: 28rpx;
      height: 28rpx;
      background-color: #E21536;
      border-radius: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 11rpx;
    }
  }
.cwgProgress {
	display: flex;
	flex-direction: column;
	width: 100%;
  position: relative;
  justify-content: center;
}
</style>
